<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06鼠标跟随图片展示</title>
     <style type="text/css">
         *{margin: 0;padding: 0;border: 0;list-style: none;}
         .all{margin: 100px;}
         .all li{  float: left;  margin-right: 40px;  border: 1px solid #ccc;  }
         .all img{  float: left;  }
         .fly{  background: url("images/apple_3_bigger.jpg") no-repeat;  width: 400px;  height: 300px;  position: absolute;  border: 1px solid #000;  left: 0;  top: 0;  display: none;  }
     </style>
    <script src="jquery-1.7.2.min.js"></script>
    <script>
        $(function () {
            $(".all li").hover(function(e){
                var x = e.pageX+10;
                var y = e.pageY+10;
                var url =  $(this).children().attr("href");
                $('.fly').show(300).css({left:x,top:y,background:'url('+url+') no-repeat'});
            },function(){
                $('.fly').hide();
            }).mousemove(function(e){
                var x = e.pageX+10;
                var y = e.pageY+10;
                $('.fly').css({left:x,top:y});
            })
        });
    </script>
</head>
<body>
<div class="fly"></div>
<ul class="all">
    <li><a href="images/apple_3_bigger.jpg"><img src="images/apple_3.jpg" alt="" width="100" height="75"></a></li>
    <li><a href="images/apple_4_bigger.jpg"><img src="images/apple_4.jpg" alt="" width="100" height="75"></a></li>
    <li><a href="images/apple_3_bigger.jpg"><img src="images/apple_3.jpg" alt="" width="100" height="75"></a></li>
    <li><a href="images/apple_4_bigger.jpg"><img src="images/apple_4.jpg" alt="" width="100" height="75"></a></li>
    <li><a href="images/apple_3_bigger.jpg"><img src="images/apple_3.jpg" alt="" width="100" height="75"></a></li>
    <li><a href="images/apple_4_bigger.jpg"><img src="images/apple_4.jpg" alt="" width="100" height="75"></a></li>
</ul>
</body>
</html>